<!--
 * @Description:  第十七章（插槽slot）  动态插槽
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-16 12:11:02
-->
<template>
  <div>
    <p>第十七章（插槽slot）Dialog</p>
    <div>
      <header class="header">
        <slot name="header"></slot>
      </header>
      <main class="main">
        <div v-for="(item, index) in data">
          <slot :index="index" :data="item"></slot>
        </div>
      </main>
      <footer class="footer">
        <slot name="footer"></slot>
      </footer>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'

type names = {
  name: string
  age: number
}

const data = reactive<names[]>([
  {
    name: 'IA slot 1',
    age: 1000,
  },
  {
    name: 'IA slot 2',
    age: 2000,
  },
  {
    name: 'IA slot 3',
    age: 3000,
  },
  {
    name: 'IA slot 4',
    age: 4000,
  },
])
</script>
<style scoped lang="less">
.header {
  height: 200px;
  background-color: red;
  color: #fff;
}

.main {
  height: 300px;
  background-color: green;
  color: #fff;
}

.footer {
  height: 200px;
  background-color: blue;
  color: #fff;
}
</style>
